

<template>
  <div class="app">
    <div class="box">
      <div class="box_lft">
        济南柴油机股份有限公司
        <div>
          <el-select v-model="unit" class="m-2" placeholder="请选择单位">
            <el-option
              v-for="item in units"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="开始时间"
          />
          <!-- <el-time-picker v-model="value1" placeholder="开始时间">
          </el-time-picker> -->
          <span class="time">-</span>
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="结束时间"
          />
          <!-- <el-time-picker v-model="value2" placeholder="结束时间">
          </el-time-picker> -->
          <el-select
            v-model="selectValue1"
            multiple
            collapse-tags
            placeholder="请选择通道"
            style="width: 240px"
            @change="selectC"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="query">查询</el-button>
        </div>
        <div class="time">
          时间选择范围：{{ valuestr }}-{{valueend}}
        </div>
      </div>
      <div class="box_rgt">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>上传文件</span>
            </div>
          </template>
          <div class="box_rgt_cot">
            <el-upload
              class="upload-demo"
              action=""
              drag
              :auto-upload="false"
              :on-change="uploadChange"
              :limit="1"
              :on-remove="handleRemove"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </el-card>
      </div>
    </div>
    <div class="box_btm">
      <el-card class="box-card">
        <div id="btm" v-if="isBtm"></div>
        <div id="btms" v-if="!isBtm"></div>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import moment from "moment";
import * as echarts from "echarts";
import XLSX from "xlsx";
import { ElMessage } from "element-plus";
import { readFile } from "../assets/readFile"; //下文有该文件代码
import { reactive, ref } from "vue";
let file = ref("");
let fileList = reactive([]);
let csv: any = reactive([]);
let value1 = ref("");
let value2 = ref("");
let valuestr = ref("");
let valueend = ref("");
const selectValue1 = ref([]);
const options: any = ref([]);
let isBtm = ref(true);
let unit: any = ref("0");
let units: any = ref([
  {
    value: "0",
    label: "温度",
    unit: "℃",
  },
  {
    value: "1",
    label: "转速",
    unit: "s",
  },
]);
const count = ref(0);
const selectC = () => {
  isBtm.value = true;
};
const handleRemove = () => {
  console.log(121212);
  options.value = [];
  selectValue1.value = [];
};
const uploadChange = async (file: any, fileList: any) => {
  let dataBinary = await readFile(file.raw);
  onStackFileChange(file.raw);
  // console.log(onStackFileChange(file.raw));

  console.log(11111);
  // let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });
  // let workSheet = workBook.Sheets[workBook.SheetNames[0]];
  // const data = XLSX.utils.sheet_to_json(workSheet);
  // console.log(data);

  // _date(data);
};

function csv_parser(csv_data: any) {
  var csv_lines = csv_data.split("\n");
  var csv_rows = new Array();

  let line0 = csv_lines[0].split(",");
  let row_num = line0.length;
  for (let i = 0; i < row_num; i++) {
    csv_rows[i] = new Array();
  }

  for (let i = 0; i < csv_lines.length; i++) {
    let line = csv_lines[i].split(",");
    if (line.length == row_num) {
      for (let j = 0; j < row_num; j++) {
        csv_rows[j][i] = line[j];
      }
    }
  }
  return csv_rows;
}

function onStackFileChange(files: any) {
  isBtm.value = true;
  let csv_rows: any;
  // console.log(files);
  // if (files.length) {
  var file = files[0];
  //stack_file.filename = file.path;
  //stack_file.version = file.name.slice(0, file.name.length-4)

  var reader = new FileReader();
  reader.readAsBinaryString(files);
  // console.log(files);
  reader.onload = function () {
    //console.log(this.result);
    //stack_file.content = this.result
    csv_rows = csv_parser(this.result);

    console.log(csv_rows[0]);
    console.log(csv_rows[1]);
    console.log(csv_rows[2]);
    console.log(csv_rows[3]);
    console.log(csv_rows[4]);
    console.log(csv_rows[5]);
    console.log(csv_rows[6]);
    console.log(csv_rows[7]);
    console.log(csv_rows[8]);
    console.log(csv_rows);
    csv = csv_rows;
    _date(csv_rows);
    console.log(csv_rows[0][0]);
    // valuestr.value = csv_rows[0][0].split(' ')[1];
    // valueend.value = csv_rows[0][csv_rows[0].length - 1].split(' ')[1];
    console.log(csv_rows[0][0])
    valuestr.value = csv_rows[0][0];
    valueend.value = csv_rows[0][csv_rows[0].length - 1];
    csv_rows.forEach((item: any, index: any) => {
      if (index > 0) {
        let obj = {
          value: index,
          label: `${index}缸${units.value[unit.value].label}`,
        };
        options.value.push(obj);
      }
    });
    console.log(options.value);
  };

  // }
}
let query = () => {
  isBtm.value = false;
  let timestr = moment(valuestr.value).format("YYYY-MM-DD HH:mm:ss");

  let timeend = moment(valueend.value).format("YYYY-MM-DD HH:mm:ss");

  let timestrs = moment(value1.value).format("YYYY-MM-DD HH:mm:ss");

  let timeends = moment(value2.value).format("YYYY-MM-DD HH:mm:ss");
  if (
    value1.value.length == 0 ||
    value1.value == undefined ||
    value1.value == null
  ) {
    ElMessage.error(`请选择开始时间`);
    return;
  }
  console.log(value2.value);
  if (
    value2.value.length == 0 ||
    value2.value == undefined ||
    value2.value == null
  ) {
    ElMessage.error(`请选择结束时间`);
    return;
  }
  if (Date.parse(timestrs) < Date.parse(timestr)) {
    ElMessage.error(`开始时间应大于${timestr}`);
    return;
  }
  if (Date.parse(timeends) > Date.parse(timeend)) {
    ElMessage.error(`结束时间应小于${timeends}`);
    return;
  }
  if (Date.parse(timeends) < Date.parse(timestrs)) {
    ElMessage.error(`结束时间应大于开始时间`);
    return;
  }
  if (selectValue1.value.length == 0) {
    ElMessage.error(`请选择要查看的数据`);
    return;
  }
  console.log(selectValue1.value.length);

  let data: any = [];
  let time: any = [];
  let obj: any = {};
  let date: any = [];
  selectValue1.value.forEach((item, index) => {
    data.push(csv[item]);
  });
  console.log(timestr);
  csv[0].forEach((item: any, index: any) => {
    if (
      Date.parse(item) >
        Date.parse(timestrs) &&
      Date.parse(item) <
        Date.parse(timeends)
    ) {
      time.push(item);
      data.forEach((items: any, indexs: any) => {
        // console.log(`${timestr1[0]} ${item.split(" ")[1]}`);
        // console.log(obj[indexs]);
        if (obj[indexs] == undefined) {
          obj[indexs] = new Array();
          obj[indexs].push(items[index]);
        } else {
          // console.log(items[index]);
          obj[indexs].push(items[index]);
        }
      });
    }
  });
  date.push(time);
  for (let key in obj) {
    date.push(obj[key]);
  }
  setTimeout(function () {
    _dates(date);
  }, 100); //一秒钟打印出111

  console.log(Date.parse(timestrs));
  console.log(Date.parse(timestr));
  console.log(date);
  console.log(selectValue1.value);
  console.log(obj);
};
let _dates = (e: any) => {
  let series: any = [];
  console.log(e);
  e.forEach((item: any, index: any) => {
    if (index > 0) {
      let obj = {
        name: `${selectValue1.value[index - 1]}路`,
        type: "line",
        data: item,
      };
      series.push(obj);
    }
  });
  console.log(series);
  _echartss(series, e[0]);
};
let _date = (e: any) => {
  let series: any = [];
  console.log(e);
  e.forEach((item: any, index: any) => {
    if (index > 0) {
      let obj = {
        name: `${index}缸${units.value[unit.value].label}`,
        type: "line",
        data: item,
      };
      series.push(obj);
    }
  });
  _echarts(series, e[0]);
};
// let _date = (e: any) => {
//   let data = e;
//   let obj = {};
//   let keys = Object.keys(e[0]);
//   let one: any = {};
//   keys.forEach((item, index) => {
//     if (item.indexOf("/") != -1) {
//       one[item] = item;
//     } else {
//       one[item] = parseInt(item);
//     }
//   });
//   data.unshift(one);

//   console.log(data);
// };
let _echartss = (series: any, xAxis: any) => {
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById("btms")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    color: [
      "#b63f66",
      "#0bd5ef",
      "#895b8a",
      "#006e54",
      "#e6b422",
      "#96514d",
      "#bf242a",
      "#84a2d4",
    ],
    title: {
      text: `单位:${units.value[unit.value].unit}`,
      textStyle: {
        color: "#000",
        fontSize: 15,
        fontWeight: 100,
      },
      left: 10,
      top: 10,
    },
    legend: {},
    tooltip: {
      trigger: "axis",
    },
    // legend: {
    // 	show: true,
    // 	data: that.weeklyHomeworkData[0].name,
    // 	textStyle: {
    // 		color: "#fff",
    // 	},
    // 	right: "35%",
    // 	top: "5%",
    // },

    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxis,
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
    },
    series: series,
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
let _echarts = (series: any, xAxis: any) => {
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById("btm")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  option = {
    color: [
      "#b63f66",
      "#0bd5ef",
      "#895b8a",
      "#006e54",
      "#e6b422",
      "#96514d",
      "#bf242a",
      "#84a2d4",
    ],
    title: {
      text: `单位:${units.value[unit.value].unit}`,
      textStyle: {
        color: "#000",
        fontSize: 15,
        fontWeight: 100,
      },
      left: 10,
      top: 10,
    },
    legend: {},
    tooltip: {
      trigger: "axis",
    },
    // legend: {
    // 	show: true,
    // 	data: that.weeklyHomeworkData[0].name,
    // 	textStyle: {
    // 		color: "#fff",
    // 	},
    // 	right: "35%",
    // 	top: "5%",
    // },

    grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxis,
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#000",
        },
      },
    },
    series: series,
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
</script>
<style>
#btm {
  width: 100vw;
  height: 60vh;
  margin: auto;
}
#btms {
  width: 100vw;
  height: 60vh;
  margin: auto;
}
.box_btm {
  /* margin-top: 10vh; */
}
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box_rgt {
  width: 45vw;
}
.box_lft {
  width: 45vw;
  font-size: 36px;
  text-align: center;
}
.box_rgt_cot {
  width: 100%;
  display: flex;
  justify-content: center;
}
.time {
  font-size: 18px;
  color: #999;
}
.el-select__tags {
  top: 20%;
}
</style>
